<template>
    <div id="MemberList">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>会员管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>鲜活投放柜管理</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div> 
        <div class="table">
             <el-table
                :data="tableData.filter(data => !search || data.uid.includes(search))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="用户id"
                  prop="uid">
                </el-table-column>

                <el-table-column
                  label="用户名"
                  prop="username">
                </el-table-column>

                <el-table-column
                  label="鲜活密码柜编号"
                  prop="bianhao">
                </el-table-column>

                <el-table-column
                  label="密码"
                  prop="mima"
                  width='120'>
                </el-table-column>

                <el-table-column
                  align="right"
                  width='330'>
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>

                  <template slot-scope="scope">
  
                    <el-button 
                      size="mini"
                      type="primary"
                      @click="editXhGui(scope.row.uid)">换柜</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="editXhPass(scope.row.bianhao)">更新柜密码</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>

        <router-view></router-view>
    </div>

</template>
<script>
    import { getXH,editXhGui,editXhPass } from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: ''
              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getXH().then((response)=>{
                       console.log(response);
                      if (response.success) {
                         this.tableData = response.data;
                        }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created

            methods:{
                async  editXhGui(uid){
                //  console.log(uid);
                     let res = await editXhGui(uid);
                     console.log(res);
                     if (res.status===200) {
                          this.$message({
                              message: '换柜成功',
                              type: 'success'
                            });
                           window.location.reload();                   
                     }
                },

                async editXhPass(bianhao){
                      let res = await editXhPass(bianhao);
                      console.log(res);
                    if (res.status===200) {
                          this.$message({
                              message: '修改密码成功',
                              type: 'success'
                            });
                           window.location.reload();                   
                     }
                }


                 
            }
     }
    
</script>
<style lang="less" scope>
   #MemberList{
     position:relative;
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .list{
      margin-left: 2rem;
      margin-right: 2rem;
   }
</style>